<template>
    <div class="m-content">
        <h3>欢迎来到我的博客</h3>
        <div class="block">
            <el-avatar shape="square" :size="50" :src="user.avater" />
            <div>{{user.username}}</div>
        </div>
        <div class="maction">
            <span><el-link href="/blogs">主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span> <el-link type="success" href="/blog/add">发表链接</el-link></span>

            <el-divider direction="vertical"></el-divider>
            <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>

            <span v-show="hasLogin"><el-link type="danger" @click="logout">退出登录</el-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                user:{
                    username:'请先登录',
                    avater:''
                },
                hasLogin:false
            }
        },
        methods:{
            logout(){
                const _this=this

                _this.$store.commit("REMOVE_INFO")
                _this.$router.push("/login")
            }

        },
        created() {
            if(this.$store.getters.getUser.username){
                this.user.username = this.$store.getters.getUser.username
                this.user.avater = this.$store.getters.getUser.avater
                this.hasLogin = true
            }
        }
    }
</script>

<style scoped>
    .m-content{
        margin: 0 auto;
        max-width: 960px;
        text-align: center;
    }
    .maction{
        margin: 10px 0;
    }
</style>